﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="PageTitle" runat="server">
    <title>管理员工 - 添加员工</title>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="PageStyles" runat="server">
    <style type="text/css">
        .text
        {
            width: 200px;
        }
    </style>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="PageScripts" runat="server">
    <script type="text/javascript">
    //************* URL常量

    var URL_ADD_USER = '/Staff/DoAddUser';
    var URL_CHECK_USER_EXIST = '/Staff/DoCheckUserExist';

//************* Accessor访问器
var EzAccessor = {};

function CreateAccessor() {
    if (ezmock.IS_MOCKED) {
        EzAccessor = CreateMockEzAccessor();

    } else {
        EzAccessor = CreateRealEzAccessor();
    }
}

function CreateMockEzAccessor() {
    //模拟实现服务器交互方法
    
    var mockEzAccessor = {

};

return mockEzAccessor;
}

function CreateRealEzAccessor() {
    //实现服务器交互方法
    var realEzAccessor = {
        "getDeptList" : function (){
            return  <%= ViewData["DeptList"]%>;
        },
        "doAddUser": function(name, deptId, userName, pwd, qqNumber, mobileNo, mainEmail){
            $('.page-submit').ajaxBusyProgress();
            $.post(
                URL_ADD_USER,
                {   'name': name,
                    'deptId': deptId,
                    'userName': userName,
                    'pwd': pwd,
                    'mobileNo': mobileNo,
                    'qqNumber': qqNumber,
                    'mainEmail': mainEmail
                },
                function (e) {
                    if (e.Status == "Success") {
                        var url = '/Staff/Staff?UserId={UserId}';
                        url = url.replace("{UserId}", e.Data.UserId);
                        $.redirectAndDisplayInfo(url, e);
                    } else {
                        $('.page-submit').ajaxBusyProgress('reset');
                    }
                }   
            );   
        }       
        
    };

    return realEzAccessor;
}

//添加用户
function addUser(){
    var name = $('#txtName').val();
    var userName = $('#txtUserName').val();
    var deptId = $('#cmbDept').val();
    var qqNumber = $('#txtQq').val(); 
    var mobileNo =  $('#txtMobile').val();
    var mainEmail = $('#txtEmail').val();
    var isHr = $('#isHR').attr("checked");
    var  pwd = $('#txtPwd').val();  

    EzAccessor.doAddUser(name, deptId, userName, pwd, qqNumber, mobileNo, mainEmail);
}



//绑定部门列表
function bindDeptList(deptList) {

    var deptListForArray = getDeptListForArray(deptList);

    $('#cmbDept')
        .comboxBinding(deptListForArray, 'text', 'value');

}


function getDeptListForArray(deptList) {
    var deptListForArray = [];
    for (var key in deptList) {
        var name = deptList[key].DeptName;
        var id = deptList[key].Id;

        deptListForArray.push({ 'text': name,
            'value': id
        });
    }
    return deptListForArray;
}


//初始化页面
function initPage() {
    CreateAccessor();
    var deptList = EzAccessor.getDeptList();

    bindDeptList(deptList);
    InitValidation();

}

function InitValidation()
{
    $.validator.addMethod('checkUserExist',
            function(value, element) { 
                var isValidateSucc = false;
                EzDesk.Service.DoCheckUserExist_Sync(function (e) {
                        isValidateSucc = !e.IsExisted;
                    },
                    {userName: value}
                );
                return isValidateSucc;
        },
        '这个用户名已经存在');

    $("#contactForm").validate({
        onkeyup:false,
        rules: {
                txtPwd: {
				    required: true,
				    minlength: 5
			    },
	    		txtPwdConfirm: {
				    equalTo: "#txtPwd"
	    	    },
                txtName:{
                    required:true
                },
                txtUserName:{
                    required:true,
                    checkUserExist:true
                },
                txtEmail:{email:true},txtMobile:{digits:true,minlength:11},txtQq:{digits:true}
            },
        messages:
            {
                txtPwd:
                    {
                        required:"请输入密码",
                        minlength:"密码不能少于5位"
                    },
                txtPwdConfirm:"两次输入密码不一致",
                txtName:"请输入姓名",
                txtUserName:{required:"请指定用户名",checkUserExist:"用户名已存在，请指定其他用户名"},
                txtEmail:"不是有效的邮箱地址",
                txtMobile:{digits:"请输入数字",minlength:"不能少于11位"},
                txtQq:"请输入数字"
            }
    });

}

//初始化事件
function initPageEvent() {
    $('#lblAddr').click(function () {
        if ($('#chkContact').attr("checked")) {
            $('#cmbContact').show()
        } else {
            $('#cmbContact').hide()
        }
    });

    $('#btnSubmit').click(function(){
//        // post请求添加用户
        var validSuccess =  $("#contactForm").valid();
        if(validSuccess) addUser();        
     });

    $('#btnRecover').click(function (){
        $('.text').clearFields();
        $('.chkBox').attr("checked", false);
        $('#cmbContact').hide();
    });

}

$(function () {
    initPage();
    initPageEvent();

});

    </script>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="PageHead" runat="server">
    <%
        Html.RenderPartial("_sayHello"); %>
</asp:Content>
<asp:Content ID="Content5" ContentPlaceHolderID="PageContent" runat="server">
    <div id="page-head" class="page-head">
        <div id="links">    
            <a href="/staff" class="head">管理员工</a>
        </div>
        <img src="../../Content/icons/add_user.png" style="width: 48px; height: 48px;" alt="add" />
        <span class="title">添加员工</span>
    </div>
    <div id="page-body">
        <div class="content">
            <form id="contactForm" name="contactForm">
            <div style="width: 480px;">
                <div class="content-section">
                    <p class="entry-explanation">
                        用户信息</p>
                    <span>设置新用户的基本信息 : 姓名 部门 </span>
                    <div class="formBox">
                        <ul class="fieldslist">
                            <li>
                                <div class="l">
                                    <label>
                                        姓名：
                                    </label>
                                </div>
                                <div class="r">
                                    <input id="txtName" name="txtName" class="text" />
                                </div>
                            </li>
                            <li>
                                <div class="l">
                                    <label>
                                        部门：
                                    </label>
                                </div>
                                <div class="r">
                                    <select id="cmbDept" style="padding: 2px;" name="deptList" value="选择部门" class="text">
                                    </select>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="content-section">
                    <p class="entry-explanation">
                        登陆信息</p>
                    <span>设置新用户的登陆用户名和初始密码 </span>
                    <div class="formBox">
                        <ul class="fieldslist">
                            <li>
                                <div class="l">
                                    <label>
                                        用户名：
                                    </label>
                                </div>
                                <div class="r">
                                    <input id="txtUserName" name="txtUserName" class="text" />
                                </div>
                            </li>
                            <li>
                                <div class="l">
                                    <label>
                                        密码：
                                    </label>
                                </div>
                                <div class="r">
                                    <input id="txtPwd" name="txtPwd" type="password" class="text" />
                                </div>
                            </li>
                            <li>
                                <div class="l">
                                    <label>
                                        密码确认：
                                    </label>
                                </div>
                                <div class="r">
                                    <input id="txtPwdConfirm" name="txtPwdConfirm" type="password" class="text" />
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="content-section">
                    <p class="entry-explanation">
                        联系方式</p>
                    <span>设置新用户的联系方式 : 电话 QQ 邮箱（可以不填写） </span>
                    <div style="margin-top: 5px; margin-bottom: 20px;">
                        <label id="lblAddr" for="chkContact">
                            <input type="checkbox" id="chkContact" class="chkBox" />添加新员工的联系方式</label>
                        <div id="cmbContact" class="formBox" style="display: none;">
                            <ul class="fieldslist">
                                <li>
                                    <div class="l">
                                        <label>
                                            电话：
                                        </label>
                                    </div>
                                    <div class="r">
                                        <input id="txtMobile" name="txtMobile" type="text" class="text" minlength="11" maxlength="11" />
                                    </div>
                                </li>
                                <li>
                                    <div class="l">
                                        <label>
                                            邮箱：
                                        </label>
                                    </div>
                                    <div class="r">
                                        <input id="txtEmail" name="txtEmail" class="text email" />
                                    </div>
                                </li>
                                <li>
                                    <div class="l">
                                        <label>
                                            QQ：
                                        </label>
                                    </div>
                                    <div class="r">
                                        <input id="txtQq" name="txtQq" class="text number" minlength="5" maxlength="12" />
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="content-section">
                    <p class="entry-explanation">
                        角色分配</p>
                    <span>是否给予新员工公司HR的角色，使其拥有修改他人考情评估等HR权力 </span>
                    <div class="formBox">
                        <label id="lblChecked" for="isHR">
                            <input type="checkbox" id="isHR" class="chkBox" />是的，我确定赐予该用户神圣的HR身份！</label>
                    </div>
                </div>
            </div>
            </form>
        </div>
    </div>
    <div class="page-submit">
        <div id="btnSubmit">确认添加</div>
        <script type="text/javascript">
            $(function () {
                $("#btnSubmit").button({
                    icons: {
                        primary: "ui-icon-circle-check"
                    },
                    text: true
                });
            });
        </script>
        &nbsp;或者&nbsp;<a id="btnRecover">取消</a>
    </div>
</asp:Content>
<asp:Content ID="Content6" ContentPlaceHolderID="PageShortcut" runat="server">
</asp:Content>
<asp:Content ID="Content7" ContentPlaceHolderID="PageFoot" runat="server">
    <div id="tip_alert" style="display: none;">
    </div>
</asp:Content>
